<template>
	<view >
		<!-- <p-navbar background="#ffffff"></p-navbar> -->
		<view class="title"> 
			<view>账号登录</view>
		</view>
		<view class="form">
			<view class="item" v-for="(item,index) in node" :key="index">
				<!-- <view class="label" :class="[`icon-${item.icon}`]">{{ item.label }}</view> -->
				<view class="content">
					<input class="input" :placeholder="item.msg" :maxlength="item.len" :type="item.type" v-model.trim="form[item.key]"
					 @keyup.enter="fnRegister" />
					<view class="password" :class="{ show: item.type === 'text'  }" v-if="item.icon === 'password'" @tap="fnPsw(index)"></view>
					<view class="code" :class="{ disabled: !codeClick }" v-if="item.key === 'code'" @tap="getMsmCode">{{ codeText }}</view>
				</view>
			</view>
		</view>
		<view class="submit">
			<u-button type="primary" ripple shape="circle" :disabled="disabled" :loading="loading" @click="fnRegister">登 录</u-button>
		</view>
		<view class="fooler">
			<!-- <view @tap="shows=true && account.length!=0">多账号切换</view> -->
			<view class="" >
				
			</view>
			<view @tap="register(1)">忘记密码?</view>
		</view>
		<view></view>
		<view class="agreement">
			还没账号？<text @tap="register(0)">立即注册</text>
		</view>
		<u-popup v-model="shows" mode="bottom">
			<view class="titles">
				账 号 
			</view>
			<scroll-view scroll-y="true" class="divContainer">
				<view class="list" v-for="(item,index) in account" @tap="btn(item.name)">{{item.name}}</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getCode
	} from '@/utils/mixins';
	export default {
		data() {
			return {
				node: [
					// 表单节点
					{
						key: 'account',
						label: '手机',
						msg: '请输入账号',
						icon: 'phone',
						type: 'text',
						len: 20
					},
					{
						key: 'password',
						label: '密码',
						msg: '请输入密码',
						icon: 'password',
						type: 'password',
						len: 20
					},
				],
				form: {}, // 表单内容
				showPsw: false, // 是否显示密码
				loading: false, // 注册加载中
				shows: false,//弹窗
				uuid:'',
				account:uni.getStorageSync('account') || [],//多账号
			}
		},
		mixins: [getCode],
		watch: {
			showPsw(val) {
				const type = val ? 'text' : 'password';
				this.show = false;
				this.$set(this.node[1], 'type', type)
			}
		},
		computed: {
			// 注册按钮是否禁止点击
			disabled() {
				for (let i = 0; i < this.mustNode.length; i++) {
					const ele = this.mustNode[i]
					if (!this.form[ele.key]) return true
				}
				return false;
			},
			// 必填的节点信息
			mustNode() {
				return this.node
			}
		},
		onLoad() {
		},
		methods: {
			btn(item){//多账号选择
			  this.form.account=item
			  this.shows=false
			},
			fnPsw(i) {
				const type = this.node[i].type
				this.$set(this.node[i], 'type', type === 'password' ? 'text' : 'password')
			},
			register(index) { //跳转注册
			if(index=='0'){//注册
				uni.navigateTo({
					url: './register'
				})
			}else{//修改密码
				uni.navigateTo({
					url: '../user/forget?type=1'
				})
			}
				
			},
			fnRegister() {
				if (this.disabled || this.loading) return;//必选项和懒加载
				for (let i = 0; i < this.mustNode.length; i++) {//判断输入框有无为空
					const ele = this.mustNode[i]
					if (!this.form[ele.key]) return this.util.toast(ele.msg)
				}
				
				this.loading = true
				this.request.post('login', {//登录
						userName: this.form.account,
						password: this.form.password,
					})
					.then(res => {
						if (res.data.code === 1) {
							this.util.toast('登录成功', 'success')
							uni.setStorageSync('Login',res.data.data);//缓存信息
							this.$forceUpdate()//强制更新
							this.user();//缓存多账号
							setTimeout(() => {
								uni.switchTab({
									url:'../home/home'
								})
							}, 1000)
						}else{
							this.util.toast(res.data.msg)
						}
						this.loading = false
					})
			},
			user(){
				let datas=this.account.findIndex(ele=>{
					return ele.name==this.form.account
				})
				if(datas<0){
					let data=[{
						name:this.form.account
					}]
					let accounts=this.account.concat(data)
					uni.setStorageSync('account',accounts)//多账号
				}
				if(this.account.length==0){//多账号为0
					let data=[{
						name:this.form.account
					}]
					uni.setStorageSync('account',data)//多账号
				}
			},
			// 获取短信验证码
			getMsmCode() {
				if (!this.codeClick) return
				const phone = this.form.phone
				if (!phone && !this.form.email) return this.util.toast('请输入您的手机号码')
				this.getCode(phone)
			}
		}
	}
</script>

<style lang="scss">
	.divContainer {
	  overflow: scroll;
	  height: 250px;
	  color: #333;
	}
.titles{
	color: #333;
	font-size: 32rpx;
	font-family: PingFang;
	font-weight: bold;
	line-height: 100rpx;
	border-bottom: 1rpx solid $border;
	text-align: center;
	text{
		float: right;
		padding-right:40rpx;
		font-size: 24rpx;
		color: #999;
	}
}
.list{
	width: 100%;
	text-align: center;
	border: 1rpx solid $border;
	padding: 20rpx 10rpx;
	letter-spacing: 1rpx;
	@include click;
}
/deep/ .u-drawer-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $color-bgs;
}
	.title {
		padding: 190rpx 60rpx 30rpx 60rpx;
		box-sizing: border-box;
		height: 264rpx;
		margin-bottom:40rpx ;
		view:nth-child(1) {
			font-size: 38rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		view:nth-child(2) {
			font-size: 24rpx;
			color: $color-text-secondary;
		}
	}
	.item {
		width: 678rpx;
		height: 88rpx;
		background: rgba(255, 255, 255, 0.15);
		opacity: 1;
		border-radius: 16rpx;
		line-height: 88rpx;
		margin-bottom: 40rpx;
		margin: 0 auto 40rpx;
		.content {
			@include flex;
			border-radius: 20rpx;
			background-color: #FFFFFF;
		}
		.label {
			height: 40rpx;
			font-size: 28rpx;
			padding-left: 20rpx;
			background-size: 36rpx 40rpx;
			background-position: 0 center;
			background-repeat: no-repeat;
			line-height: 40rpx;
		}

		.input {
			font-size: 25rpx;
			height: 88rpx;
			padding: 0 30rpx 0 20rpx;
			flex: 1;
			background: none;
			border: none;
			outline: none;
		}

		.password {
			width: 32rpx;
			height: 16rpx;
			background-image: url("~@/static/login-psw-hide.png");
			@include background;
			margin-right: 50rpx;
			@include click;
			&.show {
				height: 24rpx;
				background-image: url("~@/static/login-psw-show.png");
			}
		}
		.code {
			font-size: 24rpx;
			color: $color-primary;
			margin-right: 50rpx;
			@include click;
			&.disabled {
				color: #CACACA;
			}
		}
	}

	.submit {
		width: 678rpx;
		height: 88rpx;
		background: $light-color;
		border-radius: 20rpx;
		margin: 60rpx auto 20rpx;
		/deep/ .u-btn {
			background-color: $light-color;
			transition: .3s;
			height: 90rpx;
			border-radius: 22rpx;
			&[disabled] {
				box-shadow: none !important;
				background-color: #D7D7D7 !important;
			}
		}
		/deep/ .u-round-circle::after {
			border-radius: 20rpx;
		}
	}

	.agreement {
		margin-top: 50rpx;
		padding-bottom: 60rpx;
		text-align: center;
		font-size: 24rpx;
		position: fixed;
		bottom: 0rpx;
		left: 280rpx;
		text {
			color: $light-color;
		}
	}


	.input-phone {
		border: 1px solid #000000;
		border-radius: 10rpx;
		display: flex;
	}
	.fooler {
		display: flex;
		justify-content: space-between;
		padding: 0rpx 60rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;

		// view:nth-child(1) {	
		// 	color: $light-color;
		// }
	}
</style>
